<template>
  <div class="list-wapper">
    <div class="query__top">
      <el-row :gutter="20">
        <el-col :span="8">
          <span class="query__label">用户ID：</span>
          <el-input v-model="query.id" class="query-input" placeholder="请输入用户ID"/>
        </el-col>
        <el-col :span="8">
          <span class="query__label">用户昵称：</span>
          <el-input v-model="query.username" class="query-input" placeholder="请输入用户昵称"/>
        </el-col>
        <el-col :span="8">
          <span class="query__label">充值类型：</span>
          <el-select v-model="query.type" class="query-input" placeholder="请选择类型">
            <el-option
              v-for="(item, index) in rechargeOptions"
              :value="item.value"
              :label="item.label"
              :key="index"
            />
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="mt-20">
        <el-col :span="10">
          <span class="query__label">充值时间：</span>
          <el-date-picker
            v-model="timeLimit"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"/>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="button-content">
        <!-- <el-col :span="6"/> -->
        <el-col :span="6" :offset="18" class="query__right-content">
          <el-button size="small" type="primary" @click="handleSelect">查询</el-button>
          <el-button size="small" @click="handleReset">重置</el-button>
        </el-col>
      </el-row>
    </div>

    <el-table v-loading="loading" :data="list" size="small" style="width: 100%">
      <el-table-column prop="id" label="订单ID" width="150"/>
      <el-table-column prop="playerId" label="用户ID" width="150"/>
      <el-table-column prop="playerName" label="用户昵称" />
      <el-table-column prop="num" label="充值数量" />
      <el-table-column prop="price" label="充值金额" width="150">
        <template slot-scope="scope">
          {{ scope.row.state | formatMoney }}
        </template>
      </el-table-column>
      <el-table-column prop="type" label="充值类型" width="150">
        <template slot-scope="scope">
          {{ scope.row.type | formatRechargeType }}
        </template>
      </el-table-column>
      <el-table-column prop="yn" label="货币变动" width="150"/>
      <el-table-column prop="createTime" label="充值时间" width="180">
        <template slot-scope="{row}">
          <span>{{ row.createTime | formatTimeByTimeS }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="订单状态" width="120">
        <template slot-scope="scope">
          {{ scope.row.state | formatOrderStatus }}
        </template>
      </el-table-column>
    </el-table>
    <div v-if="totalCount && totalCount > 0" class="list-pagaps">
      <el-pagination
        :current-page="query.pageIndex || 1"
        :page-sizes="PageSizeArr"
        :page-size="pageOffset"
        :total="totalCount"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
      <div/>
    </div>
  </div>

</template>
<script>
import { cloneDeep } from 'lodash'
import ErrorView from '@/components/ErrorView/index'
import LoadingView from '@/components/LoadingView/index'
import AsyncSwitch from '@/components/AsyncSwitch/index'
import { RECHARGE_STATUS, PAGE_SIZE_ARR } from '@/common/dictory'
import { getRechargeLogList } from '@/api/recharge'
import { parseTime } from '@/utils'
const QueryInitValue = {
  id: '',
  username: '',
  type: '',
  startTime: '',
  endTime: '',
  pageIndex: 1
}
export default {
  name: 'RechargeManage',
  components: { ErrorView, LoadingView, AsyncSwitch },
  filters: {
    formatTimeByTimeS(timeStr) {
      return parseTime(new Date(timeStr), '{y}/{m}/{d} {h}:{i}:{s}')
    },
    formatRechargeType(type) {
      var typeNode = RECHARGE_STATUS.find(item => item.value === type) || {}
      return typeNode['label'] || ''
    },
    formatOrderStatus(status = 0) {
      return status && status.toString() === '1' ? '成功' : '失败'
    }
  },
  data() {
    return {
      loading: true,
      loadFailed: false,
      query: cloneDeep(QueryInitValue),
      totalCount: 0,
      pageOffset: 10,
      timeLimit: []
    }
  },
  computed: {
    rechargeOptions() {
      return cloneDeep(RECHARGE_STATUS || [])
    },
    PageSizeArr() {
      return cloneDeep(PAGE_SIZE_ARR || [10, 20, 30, 40])
    }
  },
  created() {
    this._loadData()
  },
  methods: {
    handleSelect() {
      this._loadData()
    },
    handleReset() {
      this.query = cloneDeep(QueryInitValue)
      this.timeLimit = []
    },
    handleSizeChange(pageOffset = 10) {
      this.query.pageIndex = 1
      this.pageOffset = pageOffset
      this._loadData()
    },
    handleCurrentChange(pageIndex = 1) {
      this.query.pageIndex = pageIndex
      this._loadData()
    },
    _loadData() {
      var { pageOffset = 10 } = this
      var [startTime, endTime] = this.timeLimit || ['', '']
      this.loading = true
      this.loadFailed = false
      this.list = []
      getRechargeLogList({
        ...this.query,
        offset: pageOffset,
        limit: this.query.pageIndex,
        startTime,
        endTime
      }).then(({ logs: rows = [], pageInfo = {}}) => {
        var {
          totalCount = 0
        } = pageInfo || {}
        this.totalCount = totalCount
        this.loading = false
        this.loadFailed = false
        this.list = rows
      }).catch(() => {
        this.loading = false
        this.loadFailed = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// @import url('~@styles/btn.scss');
.list-wapper {
  padding: 20px;
}
.query__top {
  padding-bottom: 20px;
}
.query-input {
  width: calc(100% - 100px);
}
.button-content {
  margin-top: 20px;
}
.query__right-content {
  text-align: right;
}
.list-pagaps{
    text-align: right;
    padding-top:20px;
}
.query__label{
    font-weight: 600;
}
.mt-20{
  margin-top:20px;
}
</style>

